<template>
	<div>
		<searchInput />
		<Tabs :tabs="tabs" @tabsItemChange="onTabsParent">
			<block v-if="tabs[0].isActive">
				<view class="first_tab">
					<!-- 路由 -->
					<navigator class="goods_item" v-for="(item,index) in goodsList" :key="index" :url="'/pages/goods_detail/index?goods_id='+item.goods_id">
						<view class="goods_img">
							<image :src="item.goods_small_logo?item.goods_small_logo:'https://ww1.sinaimg.cn/large/007rAy9hgy1g24by9t530j30i20i2glm.jpg'"
							 mode="widthFix"></image>
						</view>
						<view class="goods_info">
							<view class="goods_name">{{item.goods_name}}</view>
							<view class="goods_price">{{item.goods_price}}</view>
						</view>
					</navigator>
				</view>
			</block>
			<block v-if="tabs[1].isActive">1</block>
			<block v-if="tabs[2].isActive">2</block>
		</Tabs>
	</div>
</template>

<script>
	import searchInput from '../../components/searchInput'
	import Tabs from '../../components/tabs'
	import {
		request,showToast
	} from '../../utils/tools'
	export default {
		components: {
			searchInput,
			Tabs
		},
		data() {
			return {
				tabs: [{
						id: 0,
						value: '综合',
						isActive: true
					},
					{
						id: 1,
						value: '销量',
						isActive: false
					},
					{
						id: 2,
						value: '价格',
						isActive: false
					}
				],
				// 请求数据
				queryInfo: {
					query: '',
					cid: '',
					pagenum: 1,
					pagesize: 10
				},
				goodsList: [],
				totalPage: 0
			}
		},
		methods: {
			// tabs组件 拿到的数据 处理
			onTabsParent(index) {
				console.log('父接收的', index)
				this.tabs.forEach((v, i) => {
					i === index ? (v.isActive = true) : (v.isActive = false)
				})
			},
			// 请求数据
			async getGoodsList() {
				console.log('请求列表数据，queryInfo为：', this.queryInfo)
				const {
					data: res
				} = await request({
					url: "goods/search",
					data: this.queryInfo
				})
				console.log('goods_list请求res', res)
				// 合并
				this.goodsList = [...this.goodsList, ...res.message.goods],
					this.totalPage = Math.ceil(res.message.total / this.queryInfo.pagesize)
				console.log('页数:', this.totalPage)
				console.log('goodsList:', this.goodsList)
				uni.stopPullDownRefresh();
			}
		},

		onLoad(options) {
			console.log('cid为', options);
			// 通过 分类页面 传入的cid 有则用没有就空
			this.queryInfo.cid = options.cid || ""
			this.queryInfo.query = options.query || ""
			this.getGoodsList()
		},

		// 页面触底
		onReachBottom: function() {
			console.log('触底')
			if (this.queryInfo.pagenum >= this.totalPage) {
				uni.showToast({
					title: '没有下一页数据了'
				});
				console.log('%c没数据了', 'color: #43bb88;font-size: 24px;font-weight: bold;text-decoration: underline;');
				this.queryInfo.pagenum = this.totalPage
			} else {
				this.queryInfo.pagenum++
				console.log(this.queryInfo.pagenum)
				// 获取数据列表
				this.getGoodsList()
			}
		},
		// 下拉刷新
		onPullDownRefresh: function() {
			console.log('refresh')
			this.goodsList = []
			this.getGoodsList()
		}
	}
</script>

<style lang='less' scope>
	.first_tab {
		.goods_item {
			display: flex;
			border-bottom: 5rpx solid #333;

			.goods_img {
				flex: 2;
				display: flex;
				justify-content: center;
				align-items: center;
				// padding: 5rpx;

				image {
					width: 70%;
					height: 100%;
				}
			}

			.goods_info {
				flex: 3;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				// 文字
				.goods_name {
					display: -webkit-box;
					overflow: hidden;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
				}

				.goods_price {
					color: var(--themeColor);
					font-size: 32rpx;
				}
			}
		}
	}
</style>
